import Vue from 'vue'
import {
  message
} from 'ant-design-vue';

Vue.directive('focus', {
  inserted: function (el, binding) {
    el.focus();
  }
})

// 复制
Vue.directive('copy', {
  bind(el, binding) {
    // console.log(el);
    // console.log(binding.value);
    el.$value = binding.value;

    el.$handler = (e) => {
      if (!binding.value) {
        message.warning("没有可以复制的内容！")
        return;
      }
      const textarea = document.createElement('textarea');
      textarea.readOnly = true;
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px';
      textarea.value = el.$value;
      document.body.appendChild(textarea);
      textarea.select();
      const result = document.execCommand('Copy');
      if (result) {
        message.success('复制成功');
      }
      document.body.removeChild(textarea);
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.$handler);

  }, // 当传进来的值更新的时候触发
  componentUpdated(el, {
    value
  }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.$handler);
  },
})

// 点击其他位置
Vue.directive('click-outside', {
  bind(el, binding) {
    function bindClickEvent(e) {
      if (el.contains(e.target)) {
        return false;
      }
      console.log('click outside ,event:', binding.expression);
      if (binding.expression) {
        binding.value(e);
      }
    }
    el.__vueClickOutside__ = bindClickEvent
    document.addEventListener('click', bindClickEvent)
  },
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  },
})


Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.ant-modal-header')
    const dragDom = el.querySelector('.ant-modal')
    dialogHeaderEl.style.cursor = 'move'


    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    dialogHeaderEl.onmousedown = (e) => {

      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop;

      const minLeft = -(document.body.clientWidth / 2 - sty.width.replace(/\px/g, '') / 2);
      const minTop = 0;
      const maxLeft = (document.body.clientWidth / 2 - sty.height.replace(/\px/g, '') - 50);
      const maxTop = (document.body.clientHeight - sty.height.replace(/\px/g, ''));

      console.log('sty:', sty);
      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }


      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        let l = e.clientX - disX
        let t = e.clientY - disY

        let diaX = l + styL;
        let diaY = t + styT;

        if (diaX < minLeft) {
          diaX = minLeft;
        }
        if (diaY < minTop) {
          diaY = minTop;
        }
        if (diaX > maxLeft) {
          diaX = maxLeft;
        }
        if (diaY > maxTop) {
          diaY = maxTop;
        }


        // 移动当前元素
        dragDom.style.left = `${diaX}px`
        dragDom.style.top = `${diaY}px`

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function (e) {

        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

Vue.directive('drag', {
  inserted(el,binding) {
    // console.log('inserted-el.offsetHeight:', el.offsetHeight);
    const parent =  binding.modifiers?Object.keys(binding.modifiers):null;
    let oDiv = el; //当前元素
    if(parent){
      oDiv=el.parentNode;
    }
    
    el.style.cursor = 'move';


    let minX = 0,
      maxX = window.innerWidth - el.clientWidth,
      minY = 0,
      maxY = window.innerHeight - el.clientHeight;

    //禁止选择网页上的文字
    document.onselectstart = function () {
      return false;
    };
    oDiv.onmousedown = function (e) {
      //鼠标按下，计算当前元素距离可视区的距离
      let disX = e.clientX - oDiv.offsetLeft;
      let disY = e.clientY - oDiv.offsetTop;
      document.onmousemove = function (e) {
        //通过事件委托，计算移动的距离
        let l = e.clientX - disX;
        let t = e.clientY - disY;

        l = l < minX ? minX : l;
        l = l > maxX ? maxX : l;

        t = t < minY ? minY : t;
        t = t > maxY ? maxY : t;
        //移动当前元素
        oDiv.style.left = l + "px";
        oDiv.style.top = t + "px";
      }
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
      return false;
    };

  },

})

Vue.directive('dragTransfer', {
  
  inserted(el, binding, vnode, oldVnode) {

    class dragTransfer {
      constructor(el, binding) {
        this.el = el;
        this.opts = {
          maxW: 600, // 可伸缩的最大宽度
          minW: 50, // 可伸缩的最小宽度
          maxH: 700, // 可伸缩的最大宽度
          minH: 50, // 可伸缩的最小宽度
          translate: ['X', 'Y'],
        };
        this.parent = el.parentNode;
        this.mouse_x = 0;
        this.mouse_y = 0;

        const opts__ = binding.modifiers ? Object.keys(binding.modifiers) : null;
        if (opts__ && opts__.length) {
          this.opts.translate = opts__;
        }

      }

      init(){
        let self = this;
        
        this.el.onmousedown = function(){
          self.mousedown();
        };
      }

      mouseMove(e) {
        var e = e || window.event;
        if (this.opts.translate.includes('X')) {
          var left_width = e.clientX - this.mouse_x; // 可伸缩div的宽度
          left_width = left_width < this.opts.minW ? this.opts.minW : left_width;
          left_width = left_width > this.opts.maxW ? this.opts.maxW : left_width;
          this.parent.style.width = left_width + "px";
        }
        if (this.opts.translate.includes('Y')) {
          var left_height = e.clientY - this.mouse_y; // 可伸缩div的宽度
          left_height = left_height < this.opts.minH ? this.opts.minH : left_height;
          left_height = left_height > this.opts.maxH ? this.opts.maxH : left_height;
          this.parent.style.height = left_height + "px";
        }
      }

      //终止事件
      mouseUp() {
        document.onmousemove = null;
        document.onmouseup = null;
      }

      mousedown(ev) {
        let self = this;
        console.log(self);
        var e = ev || window.event;
        //阻止默认事件
        e.preventDefault();
        e.stopPropagation();
        
        this.mouse_x = e.clientX - this.parent.offsetWidth; // 可伸缩div距离左侧边界的宽度
        this.mouse_y = e.clientY - this.parent.offsetHeight;
        console.log('mousedown');
        
        document.onmousemove =  function(){
          self.mouseMove();
        }
        document.onmouseup = function(){
          self.mouseUp();
        } 
      }


    }

    let drag = new dragTransfer(el, binding);

    drag.init();

    
  }
})